<template>
    <div :style="{minHeight: h}" class="main">
        <header-1 class="d1">
            <template v-slot:center>
               <span class="center">
                    添加生效时间
               </span>
            </template>
            <template v-slot:right>
               <span class="right" @click="sure">
                    确定
               </span>
            </template>
        </header-1>
        <div class="show">
            <span>生效星期</span>
            <div class="show_1">
                <div v-for="item in arr" :key="item.id" class="show_2" :class="{p1 : item.state}" @click="chose(item)">
                    {{item.name}}
                </div>
            </div>
            <span>生效时间</span>
            <div>
                <div class="show_3">
                <div v-for="item in arr1" :key="item.id" class="show_4" :class="{p1 : item.state}" @click="chose2(item)">
                    {{item.name}}
                </div>
            </div>
            </div>
            <div class="fo" v-for="item in arr2" :key="item.id" v-show="show">
                <input class="foot" placeholder="开始时间" v-model="item.startime" />
                -
                <input class="foot" placeholder="结束时间" v-model="item.endtime" />
            </div>
        </div>
    </div>
</template>
<script>
import header1 from '../../components/BS/header1View.vue'
import{mapMutations} from 'vuex'
export default {
    data(){
        return{
            h: '',
            money:'',
            name:'',
            usname:'',
            num:'',
            show:false,
            arr:[
            {
                name:'周一',
                state:false
            },
            {
                name:'周二',
                state:false
            },
            {
                name:'周三',
                state:false
            },
            {
                name:'周四',
                state:false
            },
            {
                name:'周五',
                state:false
            },
            {
                name:'周六',
                state:false
            },
            {
                name:'周日',
                state:false
            },
            ],
            arr1:[
            {
                name:'全天',
                state:false
            },
            {
                name:'自定义',
                state:false
            },
            ],
            arr2:[
                {
                    startime:'',
                    endtime:''
                },
                {
                    startime:'',
                    endtime:''
                },
                {
                    startime:'',
                    endtime:''
                },

            ],   
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
    },
    components:{
        header1,
    },
    methods:{
        ...mapMutations(['Bus/day','Bus/day1']),
       sure(){
        let date = []
        let date1 = []
        let date2 = ''
        this.arr.forEach(item =>{
            if(item.state){
                date.push(item.name)
            }
        })
        this.arr2.forEach(item =>{
            if(item.startime&&item.endtime){
                date1.push(item.startime)
                date1.push(item.endtime)
                date2 = date1.join('-')
                date.push(date2)
            }
        })
        if(date1.length == 0){
            date.push('全天')
        }
        if(this.$route.params.id == 1){
            this['Bus/day'](date)
        }
        if(this.$route.params.id == 2){
            this['Bus/day1'](date)
        }
        this.$router.go(-1)

       },
       chose(item){
        item.state = !item.state
       },
       chose2(item){
        this.arr1.forEach(item =>{
            item.state = false
        })
        item.state = !item.state
        if(item.name == '自定义'){
            this.show = true
        }else{
            this.show = false
        }
       }
    }
}
</script>
<style scoped>
.show{
    width: 90%;
    margin: 20px auto;
    font-size: 15px;
}
.show_1{
    width: 100%;
    height: 255px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 15px;
    margin-top: 20px;
}
.show_2{
    width: 155px;
    height: 45px;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #797979;
    text-align: center;
    line-height: 45px;
}
.show_3{
    width: 100%;
    height: 60px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 15px;
    margin-top: 20px;
}
.show_4{
    width: 155px;
    height: 45px;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #797979;
    text-align: center;
    line-height: 45px;
}
.p1{
    background-color: #ffeeee;
    color: #ff6e53;
}
.fo{
    margin-bottom: 20px;
}
.foot{
    width: 148px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
</style>